<template>
	<view class="template">
		<view class="container">
			<u-tabs :list="template_tabs" @click="clickTemplate"></u-tabs>
			<block v-if="listData.length > 0">
				<u-swipe-action :autoClose="true">
					<u-swipe-action-item
						:options="item.options"
						:disabled="item.disabled"
						v-for="(item, index) in listData"
						:name="index"
						@click="clickItmes"
						:key="item.id"
						autoClose
					>
						<view class="content con_auto">
							<view class="content_title con_auto">
								<view class="l">
									<block v-if="item.type == 1">生日祝福</block>
									<block v-if="item.type == 2">三日回访</block>
									<block v-if="item.type == 3">三月回访</block>
									<block v-if="item.type == 4">三年回访</block>
									<block v-if="item.type == 5">结婚纪念日</block>
								</view>
								<view class="r size24 grey_color">
									<block v-if="item.member_id === 0">系统创建</block>
									<block v-else>自定义</block>
								</view>
							</view>
							<view class="content_con con_auto">
								<view class="li">
									<text class="size24 grey_color">标题：</text>
									{{ item.title }}
								</view>
								<view class="li">
									<text class="size24 grey_color">内容：</text>
									{{ item.content }}
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
				<view style="height: 80rpx" class="safe_bottom"></view>
				<view class="footer_btn safe_bottom">
					<u-button text="添加模板" @tap.stop="$navTo('/pages/work/template_add/template_add')"></u-button>
				</view>
			</block>
			<block v-else>
				<view class="all_empty">
					<u-empty mode="data" text="列表为空"></u-empty>
				</view>
			</block>
			<u-loadmore v-if="listData.length > searchForm.limit" :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			listData: [],
			searchForm: {
				limit: 10,
				page: 1,
				type: 0
			},
			template_tabs: [
				{
					name: '全部',
					type: 0
				},
				{
					name: '生日祝福',
					type: 1
				},
				{
					name: '三日回访',
					type: 2
				},
				{
					name: '三月回访',
					type: 3
				},
				{
					name: '三年回访',
					type: 4
				},
				{
					name: '结婚纪念日',
					type: 5
				}
			],
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}
			]
		};
	},
	onLoad() {},
	onShow() {
		this.getInfo();
	},
	methods: {
		clickItmes(e) {
			console.log(e)
			let item = this.listData[e.name];
			if (item.member_id == 0) {
				this.$u.toast('系统创建的无法删除');
				return;
			}
			let _this = this;
			uni.showModal({
				title: '确定删除吗?',
				showCancel: true,
				success(btn) {
					if (btn.confirm) {
						_this
							.$http('message_template/delMessageTemplateInfo', {
								id: item.id
							})
							.then((res) => {
								if (res.code) {
									_this.$u.toast('删除成功');
									_this.getInfo();
								}
							});
					}
				}
			});
		},
		getInfo(is_add = false) {
			let _this = this;
			_this
				.$http('message_template/getTemplateList', {
					...this.searchForm
				})
				.then((res) => {
					if (res.code) {
						if (is_add) {
							_this.listData = _this.listData.concat(res.data.data);
						} else {
							_this.listData = res.data.data;
						}
						if (_this.listData.length >= res.data.total) {
							this.status = 'nomore';
						} else {
							this.status = 'loadmore';
						}
					}
				});
		},
		clickTemplate(e) {
			this.searchForm.type = e.type;
			this.getInfo();
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	background: #fff;
	border-radius: 20rpx;
	margin-top: 24rpx;
	&_title {
		padding: 24rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	&_con {
		padding-bottom: 24rpx;
	}
}
.footer_btn {
	background-color: #fff;
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 99;
}
</style>
